<div class="element-chips page-layout card">
    <h2 class="header">Basic Chips</h2>
    <div class="content" fxLayout="row nowrap" fxLayout.lt-md="row wrap" fxLayoutAlign="space-between start" fxLayoutGap.gt-xs="30px">
        <div class="p-24" fxLayout="column nowrap" fxFlex="1 0 0%" fxFlex.xs="100">
            <h3>Chips Default</h3>
            <div class="mt-24 mb-24" fxLayout="row nowrap" fxLayoutGap="50px">
                <mat-chip-list>
                    <mat-chip>Basic</mat-chip>
                    <mat-chip color="primary" selected>Primary</mat-chip>
                    <mat-chip color="accent" selected>Accent</mat-chip>
                    <mat-chip color="warn" selected>Warn</mat-chip>
                    <mat-chip disabled>disabled</mat-chip>
                </mat-chip-list>
            </div>
        </div>

        <div class="p-24" fxLayout="column nowrap" fxFlex="1 0 0%" fxFlex.xs="100">
            <h3>Icons Chips</h3>
            <div class="mt-24 mb-24" fxLayout="row nowrap" fxLayoutGap="50px">
                <mat-chip-list>
                    <mat-chip>
                        Basic
                        <mat-icon>link</mat-icon>
                    </mat-chip>
                    <mat-chip color="primary" selected>
                        Primary
                        <mat-icon>link</mat-icon>
                    </mat-chip>
                    <mat-chip color="accent" selected>
                        Accent
                        <mat-icon>link</mat-icon>
                    </mat-chip>
                    <mat-chip color="warn" selected>
                        Warn
                        <mat-icon>link</mat-icon>
                    </mat-chip>
                    <mat-chip disabled>
                        disabled
                        <mat-icon>link</mat-icon>
                    </mat-chip>
                </mat-chip-list>
            </div>
        </div>

        <div class="p-24" fxLayout="column nowrap" fxFlex="1 0 0%" fxFlex.xs="100">
            <h3>Vertical Chips</h3>
            <div class="mt-24 mb-24" fxLayout="row nowrap" fxLayoutGap="50px">
                <mat-chip-list class="mat-chip-list-stacked" aria-orientation="vertical">
                    <mat-chip>Basic</mat-chip>
                    <mat-chip color="primary" selected>Primary</mat-chip>
                    <mat-chip color="accent" selected>Accent</mat-chip>
                    <mat-chip color="warn" selected>Warn</mat-chip>
                    <mat-chip disabled>disabled</mat-chip>
                </mat-chip-list>
            </div>
        </div>
    </div>

    <h2 class="header">Chip Input</h2>
    <div class="content p-32" fxLayout="row nowrap">
        <div fxLayout="column nowrap" fxLayoutGap="30px" fxFlexFill>
            <h3>chip input placed inside the chip-list element.</h3>
            <mat-form-field>
                <mat-chip-list #inpitChipList>
                    <mat-chip *ngFor="let chip of inputChips" [selectable]="selectable"
                              [removable]="removable" (removed)="inputChipRemove(chip)">
                        {{chip}}
                        <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                    </mat-chip>
                    <input placeholder="New chip..."
                           [matChipInputFor]="inpitChipList"
                           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                           [matChipInputAddOnBlur]="inputAddOnBlur"
                           (matChipInputTokenEnd)="inputChipAdd($event)">
                </mat-chip-list>
            </mat-form-field>
        </div>
    </div>

    <div class="content p-32" fxLayout="row nowrap">
        <div fxLayout="column nowrap" fxLayoutGap="30px" fxFlexFill>
            <h3>chip input placed outside the chip-list element.</h3>
            <mat-form-field>
                <mat-chip-list #chipList>
                    <mat-chip>Chip 1</mat-chip>
                    <mat-chip>Chip 2</mat-chip>
                    <mat-chip>Chip 3</mat-chip>
                </mat-chip-list>
                <input [matChipInputFor]="chipList">
            </mat-form-field>
        </div>
    </div>

    <div class="content p-32" fxLayout="row nowrap">
        <div fxLayout="column nowrap" fxLayoutGap="30px" fxFlexFill>
            <h3>chip input with an autocomplete placed inside the chip-list element.</h3>
            <mat-form-field class="example-chip-list">
                <mat-chip-list #chipList>
                    <mat-chip
                        *ngFor="let fruit of fruits"
                        [selectable]="selectable"
                        [removable]="removable"
                        (removed)="remove(fruit)">
                        {{fruit}}
                        <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                    </mat-chip>
                    <input
                        placeholder="New fruit..."
                        #fruitInput
                        [formControl]="fruitCtrl"
                        [matAutocomplete]="auto"
                        [matChipInputFor]="chipList"
                        [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                        [matChipInputAddOnBlur]="addOnBlur"
                        (matChipInputTokenEnd)="add($event)">
                </mat-chip-list>
                <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
                    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
                        {{fruit}}
                    </mat-option>
                </mat-autocomplete>
            </mat-form-field>
        </div>
    </div>
</div>
